<template>
    <div class="sku-card">
		<van-image lazy-load :src="sub.picture"/>
		<div class="card-main">
			<div class="flex flex-justify">
				<div class="gds-name">{{sub.gdsName}}</div>
				<div><span class="font-12">￥</span><span class="font-16">{{fen2Yuan(sub.skuUnitPrice)}}</span></div>
			</div>
			<div class="flex flex-justify">
				<div class="sku-info">{{sub.skuInfo}}</div>
				<div class="txt-gray font-14">x{{sub.orderAmount}}</div>
			</div>
			<div class="info-more">
				<div>
					<span v-if="sub.status==='01'" class="txt-warning">付款后24小时内发货</span>
					<span v-else-if="sub.status==='02'" class="txt-info">待发货</span>
					<span v-else-if="sub.status==='05'" class="txt-info">已发货</span>
					<span v-else-if="sub.status==='06'" class="txt-info">已收货</span>
					<span v-else-if="sub.status==='40'" class="txt-danger">退款申请中</span>
					<span v-else-if="sub.status==='41'" class="txt-danger">售后申请中</span>
					<span v-else-if="sub.status==='50'" class="txt-danger">待寄回</span>
					<span v-else-if="sub.status==='60'" class="txt-danger">售后中</span>
					<span v-else-if="sub.status==='98'" class="txt-gray">已退款</span>
					<span v-else-if="sub.status==='99'" class="txt-warning">已退货</span>
					<span v-else-if="sub.status==='90'" class="txt-gray">已取消</span>
					<span ></span>
					<van-tag v-if="sub.status!=='01' && sub.skuUnitPrice*sub.orderAmount>sub.payMoney"
							 type="success" plain class="mgl10">优惠￥{{fen2Yuan(sub.skuUnitPrice*sub.orderAmount-sub.payMoney)}}</van-tag>
				</div>
				<div>
					<van-button v-if="sub.status==='02'" size="mini" round @click.stop="handleClick(sub.status)">申请退款</van-button>
					<van-button v-if="sub.status==='06'" size="mini" round @click.stop="handleClick(sub.status)">申请售后</van-button>
					<van-button v-if="sub.status==='05'||sub.status==='06'" size="mini" round>查看物流</van-button>
				</div>
			</div>
		</div>
	</div>
</template>
<style lang="scss" scoped>
.sku-card{
	margin-top:10px;display:flex; align-items: center;flex-shrink:0;
	.van-image{ width:70px;height:70px; border-radius: 4px; overflow: hidden;}
	.card-main{
		height:70px;flex:1; padding-left:10px; min-width:0; //使用min-width:0，可让flex布局下也能自动省略隐藏，支持flex布局下的省略号
		.gds-name{
			padding-right:10px;height:18px;line-height:18px; font-size:14px; display:block;
			overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
		}
		.sku-info{
			font-size:13px; color:var(--font-third-color);line-height:18px; display:block; overflow: hidden;
		}
		.info-more{
			padding:8px 0 0; display:flex;justify-content: space-between; font-size:13px;
			.van-button{padding:0 8px; color:var(--font-second-color);}
		}
	}
}
</style>
<script lang="ts" setup>
import {SubOrderItem} from "@/types";
import {fen2Yuan} from "@/utils/validate";

const props = defineProps<{
	sub:SubOrderItem,
}>()

//methods
const handleClick=(sts:string)=>{
	console.log('subOrder status = '+sts)
}
</script>